<template>
  <div>
    <el-tabs v-model="goodType" type="card">
      <el-tab-pane
        v-for="item in goodTypeList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      ></el-tab-pane>
    </el-tabs>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      ></el-tab-pane>
    </el-tabs>
    <div class="container" style="padding-top:0">
      <el-row>
        <el-col :span="5">
          <el-input
            size="small"
            placeholder="商品名称/货号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button
              @click="search"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-cascader
            size="small"
            v-model="kind"
            :options="kindList"
            :props="casProps"
            expand-trigger="hover"
            clearable
          ></el-cascader>
        </el-col>
        <el-col style="text-align:right;" :span="14">
          <a href="https://wx.chengkenet.com/template/import.xls">
            <el-button
              v-if="tabName == '2'"
              style="margin-left:5px;"
              size="small"
              type="primary"
              >下载模板</el-button
            >
          </a>
          <el-upload
            style="display:inline-block;"
            v-if="tabName == '2'"
            action="/#"
            :limit="1"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :show-file-list="false"
          >
            <el-button style="margin-left:5px;" size="small" type="success"
              >数据导入</el-button
            >
          </el-upload>
          <el-button
            v-if="tabName == '2'"
            style="margin-left:5px;"
            @click="imgUploadVisible = true"
            size="small"
            type="primary"
            >图片上传</el-button
          >
          <el-button
            style="margin-left:5px;"
            @click="
              currentGood = {};
              editVisible = true;
            "
            size="small"
            type="primary"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="goodList"
        tooltip-effect="dark"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="名称" width="350">
          <template slot-scope="scope">
            <div style="display:flex;align-items:center;">
              <img
                style="width:50px;height:50px; margin-right:5px;"
                :src="scope.row.img_show"
                alt=""
              />
              <div>
                <div>{{ scope.row.name }}</div>
                <div>货号：{{ scope.row.item_no }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="kind_name" label="分类" width="150">
        </el-table-column>
        <el-table-column prop="address" label="价格" width="180">
          <template slot-scope="scope">
            <div>原价：￥{{ scope.row.original_price }}</div>
            <div>市场价：￥{{ scope.row.price }}</div>
            <div>会员价：￥{{ scope.row.discount_price }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="inventory" label="库存"> </el-table-column>
        <el-table-column prop="sold_out" label="总销量"> </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.sort"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            是否上架
            <el-switch
              v-model="scope.row.is_putaway"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="0"
              @change="putaway(scope.row, scope.$index)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="
                currentGood = scope.row;
                editVisible = true;
              "
              type="primary"
              size="small"
              >编辑</el-button
            >
            <!-- <el-button
              @click="goodDelete(scope.row.id)"
              type="danger"
              size="small"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom-bar">
        <div>
          <el-select
            style="display:inline-block;"
            size="small"
            v-model="batchOperate"
            placeholder="批量处理"
          >
            <el-option label="批量删除" :value="1"> </el-option>
            <el-option label="批量上架" :value="2"> </el-option>
            <el-option label="批量下架" :value="3"> </el-option>
          </el-select>
          <el-button size="small" type="primary">确认</el-button>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
    <edit-good
      :visible="editVisible"
      :goodInfo="currentGood"
      @close="
        editVisible = false;
        getNormalGoodList(page, tabName);
      "
    >
    </edit-good>
    <!-- 图片上传 弹框 -->
    <el-dialog
      title="图片上传"
      width="800px"
      center
      :visible.sync="imgUploadVisible"
    >
      <div class="excal-dialog">
        <div class="excal-upload">
          <div style="display:flex;justify-content:space-between;">
            <el-upload
              action="https://wx.chengkenet.com/api/common/upload/"
              :on-success="coverUpload"
              multiple
              accept="image/*"
              :show-file-list="false"
            >
              <el-button size="small" type="success">上传</el-button>
            </el-upload>
            <el-button size="small" type="danger" @click="imgList = []"
              >清空列表</el-button
            >
          </div>
          <div style="margin:5px 0;" v-for="item in imgList">{{ item }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import editGood from "./../good-mng/component/edit-good";
import { goodImportUpload } from "@/api/file";
import {
  getNormalGoodList,
  goodPutaway,
  getPropClassList,
  goodDelete
} from "@/api/good-mng";
export default {
  name: "NormalGoods",
  data() {
    return {
      goodTypeList: [
        {
          name: "普通商品",
          id: "1"
        },
        {
          name: "服务",
          id: "2"
        }
      ],
      tabList: [
        {
          name: "上架商品",
          id: "1"
        },
        {
          name: "下架商品",
          id: "2"
        }
        // {
        //   name: "回收站",
        //   id: "3"
        // }
      ],
      goodType: "1",
      tabName: "1",
      casProps: {
        expandTrigger: "hover",
        checkStrictly: true,
        value: "id",
        label: "kind_name",
        children: "lower"
      },
      kindList: [],
      kind: [],
      goodList: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      batchOperate: null,
      editVisible: false,
      currentGood: {},
      imgUploadVisible: false,
      imgList: [],
      baseUrl: process.env.VUE_APP_BASE_API
    };
  },
  watch: {
    tabName: function(val) {
      this.searchStr = "";
      this.goodList = [];
      this.getNormalGoodList(1, val);
    },
    kind: function(val) {
      this.getNormalGoodList(1, this.tabName);
    }
  },
  methods: {
    coverUpload(response, file, fileList) {
      this.imgList.push(response.data.file);
    },
    //上传表格
    uploadFile(item) {
      const fileObj = item.file;
      const form = new FormData();
      form.append("excel", fileObj);
      goodImportUpload(form).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "导入数据成功",
            type: "success"
          });
        }
      });
    },
    beforeUpload(file) {
      //判断文件格式
      let hz = file.name.split(".")[1];
      if (hz != "xlsx" && hz != "xls") {
        this.$message.warning("文件类型错误,请上传xlsx,xls后缀文件");
        return false;
      }
    },
    goodDelete(id) {
      this.$confirm("确认删除该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        goodDelete({ id }).then(res => {
          if (res.code === 200) {
            this.getNormalGoodList(this.page, this.tabName);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        });
      });
    },
    search() {
      this.getNormalGoodList(1, this.tabName);
    },
    putaway(row, index) {
      goodPutaway({
        id: row.id,
        putaway: row.is_putaway
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: row.is_putaway == 0 ? "下架成功" : "上架成功",
            type: "success"
          });
        } else {
          this.goodList[index].is_putaway = !this.goodList[index].is_putaway;
        }
      });
    },
    getNormalGoodList(page, type) {
      if (type == "1" || type == "2") {
        getNormalGoodList({
          page,
          putaway: type == "1" ? 1 : 0,
          is_vip: 1,
          condition: this.searchStr ? this.searchStr : null,
          kind: this.kind[1] ? this.kind[1] : null
        }).then(res => {
          if (res.code === 200) {
            this.goodList = res.data.data;
            this.total = res.data.total;
            this.page = res.data.current_page;
            this.size = res.data.per_page;
          }
        });
      }
    },
    handleCurrentChange(page) {
      this.getNormalGoodList(page, this.tabName);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 290;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getNormalGoodList(1, this.tabName);
    this.changeSize();
    getPropClassList().then(res => {
      if (res.code === 200) {
        this.kindList = res.data;
      }
    });
  },
  components: {
    editGood
  }
};
</script>

<style></style>
